﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>log flot demo</title>
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <script src="../lib/mstar.flot.ln.js" type="text/javascript"></script>
    <!--<script src="../lib/jquery.flot.js" type="text/javascript"></script>-->
    <style>
    body{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    color:#333333;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    margin:0; padding:0;}
    .input-box {
    border-color:#6B6B6B #B9B9B9 #DDDDDD;
    border-style:solid;
    border-width:1px;
    color:#333333;
    display:inline;
    font-size:93%;
    margin:4px 0 0;
    padding:2px 0 2px 2px;}
    
    .btn {
    background-color:#FFFFFF;
    border-color:#6B6B6B #B9B9B9 #DDDDDD;
    border-style:solid;
    border-width:1px;
    color:#333333;
    display:inline;
    margin:4px 0 0 -1px;
    padding:2px 4px;
    text-decoration:none;
    width:auto;
    
    }
    </style>
</head>
<body>
<div style="width:100%; float:left">
<div id="chart" style="width:800px; height:300px"></div>
</div>

<div style="width:100%; margin-top:30px; margin-left:10px;float:left">

<div id="axis"></div>
<div><input value="切换为对数图" type="button" onclick="Redraw()" class = "btn"/></div>
<p>-------------------</p>
<div><input value="切换为线性图" type="button" onclick="RedrawL()" class = "btn"/></div>
<p>-------------------</p>

</body>
<script>
var container = $("#chart");
var flotObj = null;
var num = 400;
var ticksize = 50;
var data = [{data:[[2,100],[4,40],[6,50],[8,60],[10,70]],lines:{show:true},yaxis:1,color:1}
]                   
function getOption(){
    return { xaxis: { mode:null,tickSize:ticksize,showLabel:true,ticks:null,
                      tickFormatter:null},       
                      yaxis: {labelWidth:50,labelHeight:12},        
                      bars:{show:false,barWidth:1.5,lineWidth:0,fillColor:"#2f4880"},
					  grid:{hoverable:true}
            };
}
function generateChartData(num) {
    var lineData =[], barData = [];
    for(var i = 0; i < num; i++) {
        lineData[i] = [i,(Math.random()*80+20)];
    }
    data[0].data = lineData;
}
function draw() {
	
    if (flotObj == null) {
        flotObj = new mstar.flot("chart",getOption());
    }
	flotObj.setOption({yaxis:{scalType:1}});
    flotObj.init(data);
}
generateChartData(100);
draw();
$("#chart").bind("plothover",function(e, args1, args2){
	$("#axis").html("在整个页面 mouse x: "+args1.pageX + "  mouse y: " + args1.pageY + " <br/>选中坐标 x : " + args1.x + " 坐标轴 Y: " + args2.datapoint[1] +" <br/> 鼠标在Y轴上的坐标: " + args1.y + "<br/> 坐标点距顶部距离: " + args2.pageY)
})

function Redraw() {
	flotObj.setOption({yaxis:{scalType:1}});
    flotObj.init(data);
}
function RedrawL() {
	if (flotObj == null) {
        flotObj = new mstar.flot("chart",getOption());
    }
	flotObj.setOption({yaxis:{scalType:0}});
    flotObj.init(data);
}


</script>
</html>
